<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-if代码 -->
        <p v-if="flag">显示的内容</p>
        <div v-if="type==1">AAA</div>
        <div v-else-if="type==2">BBB</div>
        <div v-else-if="type==3">CCC</div>
        <div v-else>default</div>
        <!-- v-show代码 -->
        <h1 v-show="true">v-show显示内容</h1>
        <h1 v-if="true">v-if显示内容</h1>

        <!-- v-for -->
        <!-- 遍历对象数组 -->
        <ul>
            <li v-for="(item,index) in citys" :key="index">
                {{item}}——下标：{{index}}
            </li>
        </ul>
        <!-- 循环遍历对象数组 -->
        <table>
            <tr v-for="(city,index) in cityList" :key="city.id">
                <td>{{city.id}}</td>
                <td>{{city.name}}</td>
                <td>{{city.code}}</td>
            </tr>
        </table>
        <!-- 循环单个对象 -->
        <p v-for="(value,key,index) in city" :key="index">属性名：{{key}}——值：{{value}}——下标：{{index}}</p>
        <!-- 循环输出1-100之间的数字 -->
        <h3 v-for="num in 100">{{num}}</h3>
    </div>
    <script>
        Vue.config.productionTip = false //关闭生成信息提示
        var vm = new Vue({
            el: '#app',
            data: {
                flag: ture,
                type: 2,
                //字符数组
                citys: ['北京', '上海', '深圳', '杭州'],
                cityList: [{
                    id: '101',
                    name: '北京',
                    code: '010'
                }, {
                    id: '102',
                    name: '上海',
                    code: '021'
                }, {
                    id: '103',
                    name: '南京',
                    code: '032'
                }, ],
                //单独city对象
                city: {
                    id: 'A01',
                    name: '台北',
                    code: '110',
                },

            },
        })
    </script>
</body>

</html>